<template>
	<view class="box">
	 <!-- 头部导航 -->
	   <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="扫码入库" left-icon="left"   @clickLeft="backFn" ></uni-nav-bar>
	    <!-- 扫码机器 -->
	    <view  style="margin-bottom: 20px;">
	    		<u-cell>
	    			<template #title>
	    				<view class="title">机器编码：<u--input type="text" v-model="machineFromData.machineNo"></u--input></view>
	    			</template>
	    			<template #value>
	    				<uni-icons type="scan" @click="codeBtn" size="26"></uni-icons>
	    			</template>
	    		</u-cell>
	    		<u-cell>
	    			<template #title>
						机器序列号：
	    				<u--input customStyle="height:30px" placeholder="请输入机器序列号"  v-model="form.machineSerialNumber"></u--input>
	    			</template>
	    		</u-cell>
	    		<view>
	    			<u-cell >
	    				<template #title>
	    					<u-button text="手动入库" @click="btnSaoma"  ></u-button>
	    				</template>
	    			</u-cell>
	    		</view>
				
				</view>
				<view  style="color:#fd9540;margin: 10px,10px;font-size: 18px;padding-left: 10px;">
					订单产品：
				</view>
				<view class="orderProduct">
					<uni-table border stripe emptyText="暂无更多数据">
					    <!-- 表头行 -->
					    <uni-tr>
					        <uni-th align="center" width="100px">产品名称</uni-th>
					        <uni-th align="center" width="100px">型号</uni-th>
					        <uni-th align="center" width="60px">数量</uni-th>
													  <uni-th align="center" width="60px">日租金</uni-th>
					        <uni-th align="center" width="100px">出库数量</uni-th>
					        <uni-th align="center" width="100px">未出库数量</uni-th>
					        <uni-th align="center" width="100px">回货数量</uni-th>
					    </uni-tr>
					    <!-- 表格数据行 -->
					    <uni-tr v-for="item in productList" :key="item.id">
					        <uni-td align="center">{{item.productName}}</uni-td>
					        <uni-td align="center">{{item.model}}</uni-td>
					        <uni-td align="center">{{item.quantity}}</uni-td>
													 <uni-td align="center">{{item.dailyRent}}</uni-td>
					        <uni-td align="center">{{item.deliveryQuantity}}</uni-td>
					        <uni-td align="center">{{item.undeliveryQuantity}}</uni-td>
					        <uni-td align="center">{{item.returnQuantity}}</uni-td>
					    </uni-tr>
					</uni-table>
				</view>
				<view style="color:#fd9540;margin: 10px,10px;font-size: 18px;padding-left: 10px;">
					机器信息：
				</view>
				<u--form labelPosition="left" labelWidth="90px" class="form" :model="formData"ref="form1">
							<u-form-item label="产品名称" prop="productName" borderBottom ref="item1">
								<u--input disabled disabledColor="#fff" v-model="formData.productName"border="none"></u--input>
							</u-form-item>
							<u-form-item label="产品编号" prop="productNo" borderBottom ref="item1">
								<u--input disabled disabledColor="#fff" v-model="formData.productNo"border="none"></u--input>
							</u-form-item>
							<u-form-item label="型号" prop="model" borderBottom ref="item1">
								<u--input disabled disabledColor="#fff" v-model="formData.model"border="none"></u--input>
							</u-form-item>
							<u-form-item label="机器编号" prop="machineNo" borderBottom ref="item1">
								<u--input disabled disabledColor="#fff" v-model="formData.machineNo"border="none"></u--input>
							</u-form-item>
							<u-form-item label="仓库" prop="warehouseName" borderBottom ref="item1">
								<u--input disabled disabledColor="#fff" v-model="formData.warehouseName"border="none"></u--input>
							</u-form-item>
							<!-- <u-form-item label="机器状态" prop="status" borderBottom ref="item1">
								 
										 <u-button type="text" style="color: #fd9540;margin-right: 100px;" size="mini" v-if="formData.status=='0'">正常</u-button>
										 <u-button type="text" style="color: #fd9540;" size="mini" v-if="formData.status=='1'">不可用</u-button>
										 <u-button type="text" style="color: #fd9540;" size="mini" v-if="formData.status=='2'">使用中</u-button>
										 <u-button type="text" style="color: #fd9540;" size="mini" v-if="formData.status=='3'">未激活</u-button>
								 
							</u-form-item> -->
							<u-form-item label="机器序列号" prop="machineSerialNumber" borderBottom ref="item1">
								<u--input disabled disabledColor="#fff" v-model="formData.machineSerialNumber"border="none"></u--input>
							</u-form-item>
							
				</u--form>
				<view style="color:#fd9540;margin: 10px,10px;font-size: 18px;padding-left: 10px;">
					已入库机器：
				</view>
				<!-- 已入库机器 -->
				<view class="machine">
					<uni-table border stripe emptyText="暂无更多数据" >
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center">产品名称</uni-th>
							<!-- <uni-th align="center">产品编号</uni-th> -->
							<uni-th align="center" >型号</uni-th>
							<uni-th align="center">机器序列号</uni-th>
							<uni-th align="center">仓库名称</uni-th>
							<!-- <uni-th align="center">状态</uni-th> -->
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in  mechineList" :key="index">
							<uni-td align="center">{{item.productName}}</uni-td>
							<!-- <uni-td align="center">{{item.productNo}}</uni-td> -->
							<uni-td align="center">{{item.model}}</uni-td>
							<uni-td align="center">{{item.machineSerialNumber}}</uni-td>
							<uni-td align="center">{{item.warehouseName}}</uni-td>
							<!-- <uni-td align="center">{{item.status}}</uni-td> -->
						</uni-tr>
						
					</uni-table>
				</view>
				<!-- 当前机器 -->
			
				<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getmachineOrder,getorderMachineList,machineList,searchMachineApi, } from '@/api/machine/machine.js'
	import{listOrder} from '@/api/order/order.js'
	export default {
		data() {
			return {
				machineNo:'b2cfcc8e1eaa4cae91f5ff9e1889d1d0',
				form:{
					machineSerialNumber:''
				},
				machineFromData:{
					machineNo:'',
				},//机器
				productList:[],//产品列表
				mechineList:[],//入库机器
				formData:{},//及其信息
			};
		},
		onLoad(){
			// this.getlist()
		},
		methods:{
			// 根据机器查询订单
			async getlist(){
				const res=  await machineList(this.machineFromData)
				console.log(res);
				this.formData=res.rows[0]
			},
			// 输入确认
			async btnSaoma(){
				// 根据机器序列号查询机器编码
				let res=await machineList({machineSerialNumber:this.form.machineSerialNumber}) 
				this.machineFromData.machineNo=res.rows[0].machineNo
				await this.postSearchMachine()
			},
			// 扫码
			codeBtn(){
				console.log('11');
				var that =this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						console.log(res);
						console.log(res.result);
						that.machineFromData.machineNo=res.result
						machineList(that.machineFromData).then(res=>{
							 that.formData=res.rows[0]
						getmachineOrder({machineNo:res.rows[0].machineNo}).then(res1=>{
						listOrder({orderNo:res1.data.orderNo}).then(res3=>{
							that.productList=res3.rows[0].productList
									})
							that.mechineList=[]
						 getorderMachineList({orderId:res1.data.id}).then(res2=>{
								res2.rows.forEach(item=>{
								if(item.outboundNo==null){
									that.mechineList.push(item)
													 }
																	    })
																   })
															   })
						})
						
					}
				})
			},	
			// 入库
			async postSearchMachine(){
				console.log(this.machineFromData);
				 searchMachineApi(this.machineFromData).then(res=>{
					 if(res.code==200){
						 var that=this
						 this.$refs.uToast.show({
							 type:'success',
							 message:'扫码入库成功！',
							 complete(){
								 machineList(that.machineFromData).then(res=>{
									  that.formData=res.rows[0]
									   getmachineOrder({machineNo:res.rows[0].machineNo}).then(res1=>{
										   listOrder({orderNo:res1.data.orderNo}).then(res3=>{
											   that.productList=res3.rows[0].productList
										   })
										   that.mechineList=[]
										   getorderMachineList({orderId:res1.data.id}).then(res2=>{
											   res2.rows.forEach(item=>{
											   if(item.outboundNo==null){
											    	that.mechineList.push(item)
											    	 }
											    })
										   })
									   })
								 })
							 },
						 })
					 }else{
						 this.$refs.uToast.show({
							 type:'error',
							 message:'扫码入库失败！',
						 })
					 }
				 })
			
				
			},
			// 扫码入库
			async  searchMachine(){
				  await this.postSearchMachine()
				  const res= await machineList(this.machineFromData)
				  this.formData=res.rows[0]
				  // 根据机器查询所在订单
				  let res1=await getmachineOrder({machineNo:res.rows[0].machineNo})
				// 根据订单查询关联产品
				let res3=await listOrder({orderNo:res1.data.orderNo})
				this.productList=res3.rows[0].productList
				 // 根据订单id,查询机器记录
					 this.mechineList=[]
					 let res2=await getorderMachineList({orderId:res1.data.id})
					 res2.rows.forEach(item=>{
					if(item.outboundNo==null){
					 	this.mechineList.push(item)
					 	 }
					 })
					await machineList(this.machineFromData).then(res=>{
						  this.formData=res.rows[0]
					 }) 
			 },
			// 返回
			backFn(){
				 uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
.box{
	background-color: #fff;
}
.form{
	
	background-color: #fff;
	padding-left: 10px;
	padding-right: 10px;
}
</style>
